<template>
	<view class="content" v-if="flag">
		<swiper :indicator-dots="true" autoplay="true" interval="3000" circular duration="500" class="my-swiper">
			<swiper-item>
				<!-- <image src="../../static/bx.png" style="width: 100%;height: 100%;"></image> -->
			</swiper-item>
			<swiper-item>
				<!-- <image src="../../static/bx.png" style="width: 100%;"></image> -->
			</swiper-item>
			<!-- 更多swiper-item -->
		</swiper>
		<view class="tab">
			<tui-tabs :tabs="tabs" :currentTab="tabNum" @change="clickTab"></tui-tabs>
		</view>
		<!--保险-->
		<view class="body" v-if="!tabNum">
			<view class="body-title" v-for="item in insuranceData" :key="item.id" @click="jumpDetail(item)">
				<image :src="item.url" mode="aspectFit" />
				<view class="title-ms">
					<view class="title-ms1">
						<view class="title-ms1-ms1">{{item.name}}</view>
						<!-- <view class="title-ms1-ms2">{{item.addr}}</view> -->
						<view class="title-ms1-ms2">{{item.description}}</view>

					</view>
				</view>
			</view>
		</view>
		<!--详情-->
		<!--列表-->
		<view class="body" v-else>
			<view class="shoppingList" @click="shopC(item)" v-for="(item,index) in shopData">
				<view class="shoping-contnet">
					<image :src="item.image" mode="aspectFit" />
					<view class="contnet">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="" v-else>
		功能暂未开放
	</view>
</template>

<script>
	import {
		merchantList
	} from '@/api/shop'
	import {
		baseUrl
	} from '@/util/config.js'
	export default {
		created() {
			this.getData()
		},
		data() {
			return {
				flag: false,
				shopData: [{
					text: '黑购买一个撒花姑娘无吃个专题页',
					image: '../../static/gc.png'
				}, {
					text: '黑檀木材价格,爱采购优选,海量热销货源,支持选购,询价批发,上百度,专题页,支持在线选购,实时询价,批发选购黑檀木材,上百度爱采购黑檀木材专题页',
					image: '../../static/gc.png'
				}],
				tabs: [{
					name: '保险超市',
					id: 0
				}, {
					name: '同城商城',
					id: 1
				}],
				current: 0,
				image: "/static/bx1.png",
				tabNum: 0,
				insuranceData: [],

			}
		},
		methods: {
			getData() {
				merchantList({
						isInsurers: 0
					}, 'get')
					.then((res) => {
						if (res.code == 200) {
							this.insuranceData = res.rows
							res.rows.forEach(item => {
								item.url = baseUrl + item.url
							})
						}
					})
			},
			clickTab(number) {
				this.tabNum = number.item.id;

			},
			jumpDetail(item) {
				uni.navigateToMiniProgram({
					appId: '目标小程序的appid', // 填入目标小程序的 appId
					path: 'pages/index/index', // 打开的页面路径，如果为空则打开首页
					extraData: {
						// 需要传递给目标小程序的数据
					},
					success(res) {
						// 打开成功的回调
					},
					fail(err) {
						// 打开失败的回调
					}
				});
			},
			shopC(item) {
				// uni.navigateTo({
				// 	url: "/pages/classify/classify"
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: white;
	}

	.my-swiper {
		height: 400rpx;
	}

	.tab {
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		line-height: 80rpx;

		.tab-title {
			font-weight: bold;
			font-size: 40rpx;
		}

		.tab-titleyx {
			border-bottom: 3rpx solid rgb(215, 94, 81);
			color: white;
			font-weight: bold;
			font-size: 40rpx;
			color: rgb(215, 94, 81);
		}
	}

	.content {
		padding: 10px;
	}

	.body {
		margin-top: 40rpx;

		.body-title {
			display: flex;
			border-bottom: 1rpx solid #eee;
			height: 200rpx;
			padding: 10px;

			image {
				width: 300rpx;
				height: 100%;
			}

			.title-ms {
				height: 100%;
				width: 450rpx;
				display: flex;
				justify-content: space-between;

				.title-ms1 {
					.title-ms1-ms1 {
						font-weight: bold;
						font-size: 30rpx;
						margin-top: 10rpx;
					}

					.title-ms1-ms2 {
						width: 100%;
						margin-top: 10rpx;
						color: rgb(136, 136, 136);
					}
				}

				.title-ms2 {
					border: 1rpx solid rgb(215, 94, 81);
					height: 50rpx;
					margin-top: 143rpx;
					border-radius: 30rpx;
					color: rgb(215, 94, 81);
					font-size: 30rpx;
					font-weight: bold;
					line-height: 50rpx;
					width: 200rpx;
					text-align: center;
				}
			}
		}

		.body-icon {
			height: 400rpx;
			background: rgb(245, 245, 247);

			.icon-title {
				display: flex;
				justify-content: space-around;
				padding-top: 30rpx;


				.icon-title01 {


					image {
						width: 100rpx;
						height: 100rpx;
						border: 1rpx solid rgb(138, 112, 84);
						border-radius: 100rpx;

					}

					.icon-title01-ms {

						padding-left: 18rpx;
						font-weight: bold;
					}
				}
			}


		}

		.shoppingList {
			margin-top: 30rpx;
			border-bottom: 1rpx solid #eee;

			.shoping-contnet {
				height: 200rpx;
				// border: 1rpx solid green;
				display: flex;

				image {
					width: 300rpx;
					height: 100%;
					margin-left: 20rpx;
				}

				.contnet {
					height: 100%;

					margin-left: 10rpx;
					width: 410rpx;
					color: rgb(136, 136, 136);
					overflow: auto;
				}
			}

		}
	}
</style>